<script setup>
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import { projectNewsApi, systemConfigApi } from "@/api";
const router = useRouter();

const topImg = ref("");
const newsList = ref([]);
const page = ref(1);
const pageSize = ref(20);
const total = ref(0);

const getNewsList = () => {
  const params = {
    page: page.value,
    page_size: pageSize.value,
  };
  projectNewsApi(params).then((res) => {
    newsList.value.push(...res.items);
    total.value = res.total_count;
  });
};

const nav = (id) => {
  router.push({
    path: "/information_details",
    query: { id },
  });
};

onMounted(() => {
  getNewsList();
  systemConfigApi().then((res) => {
    topImg.value = res.project_big_image_url;
  });
});
</script>
<template>
  <div class="">
    <div class="w-full pb-[35%] lg:pb-[20%] relative">
      <img class="w-full h-full absolute object-cover" :src="topImg" alt="" />
    </div>
    <div class="max-w-[1200px] mx-auto flex flex-col gap-5 p-3 lg:p-5">
      <div
        class="card flex flex-col lg:flex-row gap-5 p-3 lg:p-5 cursor-pointer border-b border-[#eee] last:border-0"
        v-for="item in newsList"
        :key="item.id"
        @click="nav(item.id)"
      >
        <div class="w-full lg:w-[30%] pb-[66%] lg:pb-[20%] relative">
          <img
            :src="item.project_news_url"
            class="w-full h-full absolute top-0 left-0"
            alt=""
          />
        </div>
        <div class="flex-1 flex flex-col justify-between gap-3">
          <div>
            <div class="text-2xl font-bold">
              {{ item.project_news_title }}
            </div>
            <div class="mt-5 leading-loose">
              {{ item.project_news_intro }}
            </div>
          </div>
          <div class="flex gap-5 text-[#999]">
            <div class="flex gap-1">
              <i class="bi bi-clock"></i>
              <span>{{ item.create_time }}</span>
            </div>
            <!-- <div class="flex gap-1 items-start">
              <i class="bi bi-tag"></i>
              <div class="flex gap-2">
                <span class="hover:text-[#a67e3d]" v-for="item in 4" :key="item"
                  >标签{{ item }}</span
                >
              </div>
            </div> -->
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.card {
  border-radius: 10px;
  transition: all 0.3s ease-in-out;
  &:hover {
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
  }
}
</style>
